<template>
	<view class="h100v bf f-y-bt">
		<view class="f-g-0">
			<u-navbar leftText="返回" title="商品管理" titleStyle="font-size:16px" :safeAreaInsetTop="true" @leftClick="left"
				@rightClick="right" :placeholder="true">
				<view class="u-nav-slot" slot="left">
					<u-icon name="arrow-left" size="20"></u-icon>
				</view>
			</u-navbar>
			<!-- <view class="tab p-10-0 bf" style="z-index: 100;">
				<view class="dfa">
					<view class="w50 f-c tac" @click="tab(1)">
						<text class="mr5 wei">{{title1}}</text>
						<u-icon :name="show1?'arrow-up':'arrow-down'" color="#000" size="14"></u-icon>
					</view>
					<view class="w50 f-c" @click="tab(2)">
						<text class="mr5 wei">{{title2}}</text>
						<u-icon :name="show2?'arrow-up':'arrow-down'" color="#000" size="14"></u-icon>
					</view>
				</view>
				<view class="p-0-10 cover" :class="show1?'down':'up'">
					<view class="dfbc p-10-0" v-for="(item,index) in type1" :key="index" @click="choose(item,index,1)">
						<text :style="{color:activeNum1==index?'#FD8906':''}">{{item.label}}</text>
						<u-icon v-if="activeNum1==index" name="checkmark" :color="'#FD8906'" size="14"></u-icon>
					</view>
				</view>
				<view class="p-0-10 cover" :class="show2?'down':'up'">
					<view class="dfbc p-10-0" v-for="(item,index) in type2" :key="index" @click="choose(item,index,2)">
						<text :style="{color:activeNum2==index?'#FD8906':''}">{{item.label}}</text>
						<u-icon v-if="activeNum2==index" name="checkmark" color="#FD8906" size="14"></u-icon>
					</view>
				</view>
			</view> -->
			<view class="p10" @click="toSearch">
				<u--input prefixIcon="search" placeholder="请输入商品名称" border="none" shape="circle"
					:customStyle="{background:'#f5f5f5',height:'60rpx',paddingLeft:'20rpx'}"
					v-model="queryForm.product_name" @input="searchData">
				</u--input>
			</view>
		</view>
		<view class="f-g-1 o-h goodw">
			<lee-linkage :list="dataList" @changeShow="changeShow" @putsxj="clicksxj" @clickfl="clickfl"
				@updatePageAndFetchData="handleUpdatePageAndFetchData" @fetchData="fetchData"
				@scrolltolower="handleScrollToLower"></lee-linkage>
			<view class="navbar2 bt f-row">
				<view class="f-c" style="width: 168rpx;background: #FBFBFB;">商品设置</view>
				<view class="f-1 f-row bf">
					<template v-for="(v, i) in navs">
						<view class="f-1 f-y-c" @click="djTab(v)" :key="i">
							<view class="wh f-c f-y-c">
								<text class="cf7c mr10" :style="{ color: subColor ,fontSize:'38rpx'}"
									:class="['icon' + v.i, 'iconfont f20']"></text>
								<view class="">{{ v.t }}</view>
							</view>
						</view>
					</template>
				</view>
			</view>
		</view>
		<u-popup :show="show" :safeAreaInsetBottom="true" round="10" @close="show=false" @open="show=true">
			<view class="p10 bs6 bottom">
				<!-- <view class="dfbc p-10-0">
					<text>库存无限</text>
					<u-switch v-model="state" :inactiveValue="1" :activeValue="0" activeColor=""></u-switch>
				</view> -->
				<view v-if="form.specSwitch == 0">
					<view class="dfbc p-10-0">
						<text class="wei c0">{{form.name}}</text>
					</view>
					<view class="dfbc p-10-0">
						<text>剩余库存</text>
						<view>
							<u--input placeholder="请输入剩余库存" border="none" :customStyle="{background:'#fff'}"
								v-model="form.singleSpec.surplusInventory">
							</u--input>
						</view>
					</view>
					<view class="dfbc p-10-0">
						<text>自定义库存</text>
						<view>
							<u--input placeholder="请输入自定义库存" border="none" :customStyle="{background:'#fff'}"
								v-model="form.singleSpec.inventory">
							</u--input>
						</view>
					</view>
					<view class="dfbc p-10-0">
						<text>是否开启自动补足</text>
						<u-switch v-model="form.singleSpec.dayFilling" :inactiveValue="0" :activeValue="1"
							:activeColor="subColor" size="20">
						</u-switch>
					</view>
				</view>
				<block v-if="form.specSwitch == 1">
					<view class="dfbc p-10-0">
						<text class="wei c0">{{form.name}}</text>
					</view>
					<view v-for="(v,i) in form.skus" :key="i" class="bb1">
						<view class="dfbc mt10">
							<text
								class="c0 f12 wei">规格名称：{{v.specName && v.specName.length && v.specName[0].name}}</text>
						</view>
						<view class="dfbc p-10-0">
							<text>剩余库存</text>
							<view>
								<u--input placeholder="请输入剩余库存" border="none" :customStyle="{background:'#fff'}"
									v-model="v.surplusInventory">
								</u--input>
							</view>
						</view>
						<view class="dfbc p-10-0">
							<text>自定义库存</text>
							<view>
								<u--input placeholder="请输入自定义库存" border="none" :customStyle="{background:'#fff'}"
									v-model="v.inventory">
								</u--input>
							</view>
						</view>
						<view class="dfbc p-10-0">
							<text>是否开启自动补足</text>
							<u-switch v-model="v.dayFilling" :inactiveValue="0" :activeValue="1" :activeColor="subColor"
								size="18">
							</u-switch>
						</view>
					</view>
				</block>
			</view>
			<view class="p10">
				<view class="p10 but cf tac f14" style="border-radius: 40rpx;"
					:style="{background:subColor,color:'#000',fontWeight:'bold'}" @click="save">
					保存
				</view>
			</view>
		</u-popup>
		<u-modal cancelText="取消" :confirmColor="subColor" :title="puta_tit" :showCancelButton="true" :show="puta"
			:closeOnClickOverlay="true" @cancel="puta=false" @close="puta=false" @confirm="confirm">
			<view class="tac p-15-0 f15">该商品库存为9999，{{puta_cont}}</view>
		</u-modal>
		<view v-if="overlay" class="mask" @click="overlay=false;show1=false;show2=false"></view>
		<dLoading :status="loading"></dLoading>
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex'
	import leeLinkage from '@/components/StarLee-linkage/linkage.vue'
	export default {
		components: {
			leeLinkage
		},
		data() {
			return {
				show: false,
				puta: false,
				overlay: false,
				subColor: uni.getStorageSync('subject_color'),
				puta_tit: '',
				puta_cont: '',
				state: 0,
				value: '',
				activeNum1: 0,
				activeNum2: -1,
				show1: false,
				show2: false,
				title1: '全部商品',
				title2: '商品渠道',
				otherForm: {
					page: 1,
					limit: 10,
					product_name: '',
					sync_status: 2,
					state: ''
				},
				type1: [{
						label: '全部商品',
						value: 0,
					},
					{
						label: '审核中',
						value: 1,
					},
					{
						label: '审核失败',
						value: 2,
					},
					{
						label: '上架中',
						value: 3,
					},
					{
						label: '下架中',
						value: 4,
					}
				],
				type2: [{
						label: '外卖商品',
						value: 1,
					},
					{
						label: '店内商品',
						value: 2,
					},
					{
						label: '外卖+店内商品',
						value: 3,
					}
				],
				typeId: 1,
				queryForm: {
					id: '',
					page: 1,
					limit: 10,
					product_name: '',
					sj_status: '',
				},
				classfiy: [],
				form: {},
				dataList: [],
				loading: '',
				navs: [{
						i: '-jiahao',
						k: 'xjfl',
						url: 'flsz',
						t: '商品分类'
					},
					// {
					// 	i: '-jiahao',
					// 	k: 'spgl',
					// 	url: 'fbsp-spk',
					// 	t: '门店商品库'
					// }, 
					{
						i: '-jiahao',
						k: 'xjsp',
						url: 'xzlx',
						t: '新建商品'
					}
				],
				total: "",
				hasLoadedData: false
			}
		},
		onShow() {
			// this.getCategory()
			this.queryForm.page = 1
			this.queryForm.product_name = ''
			this.queryForm.sj_status = ''
			this.hasLoadedData= false
			this.fetchData()
		},
		computed: {
			...mapState({
				store: state => state.store,
			}),
		},
		methods: {
			handleScrollToLower(eventData) {
				this.hasLoadedData = true
				if (eventData.status == 0) {
					this.queryForm.page++
					this.fetchData()
				} else {
					this.otherForm.page++
					this.otherIndex()
				}
			},
			handleUpdatePageAndFetchData(eventData) {
				this.hasLoadedData = false
				if (eventData.status == 0) {
					this.queryForm.page = 1;
					this.fetchData()
				} else {
					this.otherForm.page = 1
					this.otherIndex()
				}
			},
			searchData() {
				this.dataList = []
				this.hasLoadedData = false;
				this.queryForm.page = 1
				this.fetchData()
			},
			async fetchData() {
				uni.showLoading()
				await this.beg.request({
					url: '/admin/product.Product/index',
					method: 'post',
					data: this.queryForm
				}).then(res => {
					if (res.code == 1) {
						uni.hideLoading()
						res.data.data.forEach((v) => {
							if (v.delivery_method != '') {
								v.delivery_method = JSON.parse(v.delivery_method)
							}
							if (v.pois != '') {
								v.pois = JSON.parse(v.pois)
							}
							if (v.apply_date != '') {
								v.apply_date = JSON.parse(v.apply_date)
							}
							if (v.description_rich_text != '') {
								v.description_rich_text = JSON.parse(v.description_rich_text)
							}
							if (v.notification != '') {
								v.notification = JSON.parse(v.notification)
							}
							if (v.dishes_image_list != '') {
								v.dishes_image_list = JSON.parse(v.dishes_image_list)
							}
							if (v.environment_image_list != '') {
								v.environment_image_list = JSON.parse(v.environment_image_list)
							}
							if (v.image_list != '') {
								v.image_list = JSON.parse(v.image_list)
							}
							v.sku.guigeList = JSON.parse(v.sku.specs)
							v.sku.name = v.sku.sku_name
							v.sku.menprice = v.sku.origin_amount
							v.sku.tuanprice = v.sku.actual_amount
						})
						let newData = res.data.data
						if (!this.hasLoadedData) {
							this.dataList = newData;
							this.hasLoadedData = true;
						} else {
							this.dataList = this.dataList.concat(newData);
						}
					} else {
						uni.hideLoading()
					}
				})
			},
			clickfl(index) {
				this.dataList = []
				if (index == 0) {
					this.queryForm.sj_status = ''
					this.queryForm.page = 1
					this.fetchData()
				}
				if (index == 1) {
					this.otherForm.sync_status = '1,98'
					this.otherForm.state = 1
					this.queryForm.page = 1
					this.otherIndex()
				}
				if (index == 2) {
					this.otherForm.sync_status = '3,99'
					this.otherForm.state = 3
					this.queryForm.page = 1
					this.otherIndex()
				}
				if (index == 3) {
					this.queryForm.sj_status = 1
					this.queryForm.page = 1
					this.fetchData()
				}
				if (index == 4) {
					this.queryForm.sj_status = 2
					this.queryForm.page = 1
					this.fetchData()
				}
			},
			left() {
				uni.navigateBack()
			},
			toSearch() {
				return
				uni.navigateTo({
					url: '/pages/home/search/index'
				})
			},
			otherIndex() {
				uni.showLoading()
				this.beg.request({
					url: "/admin/product.Product/other_index",
					method: 'post',
					data: this.otherForm,
				}).then(res => {
					if (res.code == 1) {
						uni.hideLoading()
						res.data.data.forEach((v) => {
							v.delivery_method = JSON.parse(v.delivery_method)
							v.pois = JSON.parse(v.pois)
							v.apply_date = JSON.parse(v.apply_date)
							v.description_rich_text = JSON.parse(v.description_rich_text)
							v.notification = JSON.parse(v.notification)
							v.dishes_image_list = JSON.parse(v.dishes_image_list)
							v.environment_image_list = JSON.parse(v.environment_image_list)
							v.image_list = JSON.parse(v.image_list)
							v.sku.guigeList = JSON.parse(v.sku.specs)
							v.sku.name = v.sku.sku_name
							v.sku.menprice = v.sku.origin_amount
							v.sku.tuanprice = v.sku.actual_amount
						})
						let newData = res.data.data
						if (!this.hasLoadedData) {
							this.dataList = newData;
							this.hasLoadedData = true;
						} else {
							this.dataList = this.dataList.concat(newData);
						}
					} else {
						uni.hideLoading()
					}
				})
			},
			changeTab(i) {
				this.actTab = i
			},
			changeShow(value, v) {
				this.form = v.goods
				this.show = value
			},
			clicksxj(v) {
				let n = `你确定要${v.deleted_at?'上架':'下架'}该商品吗`,
					a = v.deleted_at ? 'goodsRestore' : 'storeGoodsList',
					goodsIds = [v.goods.id]
				uni.showModal({
					title: '温馨提示',
					content: n,
					success: async (res) => {
						if (res.confirm) {
							let {
								msg
							} = await this.beg.request({
								url: `${this.api[a]}/${this.typeId}`,
								method: v.deleted_at ? "POST" : "DELETE",
								data: {
									goodsIds,
								}
							})
							this.getCategory()
							uni.$u.toast(msg)
						}
					}
				});
			},
			confirm() {
				this.puta = false
			},
			async save() {
				let changes = [];
				if (this.form.specSwitch == 1) {
					changes = this.form.skus.map((item) => {
						return {
							specMd5: item.specMd5,
							inventory: item.inventory,
							dayFilling: item.dayFilling,
							surplusInventory: item.surplusInventory,
						};
					});
				} else if (this.form.specSwitch == 0) {
					changes.push({
						specMd5: this.form.singleSpec.specMd5,
						inventory: this.form.singleSpec.inventory,
						dayFilling: this.form.singleSpec.dayFilling,
						surplusInventory: this.form.singleSpec.surplusInventory,
					});
				}
				let {
					msg
				} = await this.beg.request({
					url: `${this.api.storeGoodsList}/${this.typeId}`,
					method: "PUT",
					data: {
						changes,
					}
				})
				this.getCategory()
				uni.$u.toast(msg)
				this.show = false
			},
			glfl() {
				this.go({
					url: '../spgl/flsz?type=' + (this.tarrIdx == 1 ? 2 : 1)
				})
			},
			djTab(msg) {
				if (msg.url == 'xzlx') {
					uni.navigateTo({
						url: `/pages/home/editProduct/editProduct?stutas=1`
					})
				} else if (msg.url == 'flsz') {
					uni.navigateTo({
						url: '/pages/mine/spgl/flsz'
					})
				} else if (msg.url == 'fbsp-spk') {
					uni.navigateTo({
						url: '/pages/mine/spgl/fbsp-spk'
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-navbar__content__title {
		font-size: 16px !important;
	}

	.tab {
		position: relative;

		.cover {
			width: 100%;
			position: absolute;
			top: 70rpx;
			max-height: 0px;
			padding-bottom: 10px;
			overflow: hidden;
			background-color: #fff;
			transition: max-height 0.2s linear;
			z-index: 99;

			.dfbc {
				padding: 25rpx 0;
			}
		}

		.up {
			max-height: 0px;
		}

		.down {
			max-height: 235px;
			border-radius: 0 0 20rpx 20rpx;
		}
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100vh;
		background-color: rgba(#000, 0.5);
	}

	.bottom {
		/deep/.u-input__content__field-wrapper__field {
			text-align: right !important;
		}
	}

	/deep/.u-modal__title {
		color: #000 !important;
	}

	/deep/.u-popup {
		flex: 0 !important;
	}

	.goodw {
		padding-bottom: 110rpx;
	}

	.navbar2 {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		background: #fff;
		box-shadow: 0 0rpx 8rpx 4rpx rgba(0, 0, 0, 0.05)
	}
</style>